<template>
  <div>
    <el-form inline>
      <!-- <el-form-item label="日期">
        <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="queryParams.date" @change="queryData">
        </el-date-picker>
      </el-form-item> -->
      <el-form-item>
        <el-radio-group v-model="valueKeys[0]" @change="updateChart">
          <el-radio-button v-for="(v,k,i) in valueFormat" :label="k" :key="'value_key_'+i">{{ v.name }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div ref="chart" style="width: 98%;min-width:360px ;height: 400px;"></div>
  </div>
</template>
<script>
  import {
    GroupValueChart,
    DoubleGroupChart,
    MultipleValueChart
  } from '@/views/components/chart'
  import {
    today
  } from '@/views/components/utils'
  import deviceEnvironmentAPI from '@/api/device/environment'
  export default {
    name: 'EnvironmentLineChart',
    mixins: [GroupValueChart],
    data() {
      const vm = this
      return {
        chartOption: {
          title: {
            text: vm.$t('chart.EnvironmentChart'),
            left: 'center'
          },
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          xAxis: [{
            type: 'time'
          }],
          yAxis: [{
            type: 'value',
            show: true
          }]
        },
        chartType: 'line',
        valueFormat: {
          temperature: {
            name: vm.$t("Temperature"),
            unit: "℃",
          },
          humidity: {
            name: vm.$t("Humidity"),
            unit: "%",
          },
          tvoc: {
            name: "TVOC",
            unit: "μg/m³",
          },
          co2: {
            name: "CO₂",
            unit: "ppm",
          },
          pm2d5: {
            name: "PM2.5",
            unit: "%",
          },
          pm10: {
            name: "PM10",
            unit: "%",
          },
          ch2o: {
            name: "CH2O",
            unit: "%",
          }
        },
        valueKeys: ['temperature'],
        groupKeys: ['department', 'createTime'],
        chartType: "line",
        queryParams: {
          date: today('yyyy-MM'),
        },
        list: []
      }
    },
    created() {
      this.queryData()
    },
    methods: {
      getDepartmentName(id) {
        const department = this.$store.getters.getDepartmentById(id)
        return department === undefined || department === null ? '' : department.name
      },
      queryData() {
        const vm = this
        deviceEnvironmentAPI.list(this.queryParams).then(res => {
          vm.list = res.data.map(item => {
            item.department = vm.getDepartmentName(item.deptId)
            // item.createTime = new Date(item.createTime)
            return item
          })
          vm.updateChart()
        })
      }
    }
  }

</script>
